<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>Observer Pattern</title>
    <script src="./subscribe.js"></script>

    <body>
        <button id="addNewObserver">Add New Observer checkbox</button>
        <input id="mainCheckbox" type="checkbox"/>
        <div id="observersContainer"></div>        
    </body>

    <script type="text/javascript">
        var controlCheckbox = document.getElementById('mainCheckbox');
        var addBtn = document.getElementById('addNewObserver');
        var container = document.getElementById('observersContainer');

        // 创建一个全局订阅中心
        var subscribeCenter = new SubscribeCenter();

        extend(new Subscriber(), container);
        // 订阅一个事件
        container.addSubscribe(new Subscribe('btnclick', function(name, context){
            var textElement = document.createElement('div');
            textElement.innerHTML = '<p>name:' + name + ', context:' + context + '</p>';
            this.appendChild(textElement); 
        }));

        subscribeCenter.addSubscriber(container);

        addBtn.addEventListener('click', function(){
            subscribeCenter.publish(new Publish('btnclick', 'haha'));
        });
    </script>
</html>